Padahal tutorial kemarin menjelaskan bagaimana mngunakan providers state 


management 
Hanya satu state sekarang lebih dari satuy state 


Kali ini membhas nya 
Ada stu buah kasus 


Š 46 FLUTTER 43. Provider State Management (Multi Provider).mp4 - VLC media player 


import 


void main() => runApp(MyApp()): 


Balance 10000) 


Apple (500) x 0 o ®© 


Dcu 


$ flutter run 
Your application code is in .\lib\main.dart. 


exit code 9 


00:35 
SX 0 i 


IN) Ke Di SSM 
Disni punya saldo cerita 10 ribu 
Aplikasi ini menjual aplle 500 rupiah ini kita beli masih O inmi total 


Jika beli klik tombol maka ada 
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d main() => runApp(MyApp()): 


Balance 
Apple (500) x 1 500) 


p cu - 
$ flutter run 


Your application code is in .\lib\main.dart. 


exit code @ 


E EAE 


z 
u 
z 
HI 
Uu 


Uang nya berkurang menjadi 9500 

Ini akan kita buat 

Kita akan mengunakan 2 shared state 
1 untuk menyimpan saldo 

1 menyimpan jumlah saldo yg dibeli 
Pertam buat biasa stl widget 

myApp 

lalu material app 

home nya scafold 

appbar title 
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main() => runApp( 
{ 
build( context) { 
t ( 
home: ( 


appBar: (backgroundColor: .purple, title: 
» 


> cu 
$ flutter run 


Your application code is in .\lib\main.dart. 


exit code @ 


PGA , 
02:05 ———— 17:27 


IN da Tn Fs MP i| 
lalu body nya pakai center 

child nya ada column main axis center 

children sendiri buat row main axi center juga 

childer untuk tampilan saldo berarti text 

berikutnya ada nilai saldo nya dibugkus kotak warna ungu yaitu container 
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appoai`: AK VALKENOUNULOLOP : .purpie, titie: 
body: Center( 
child: lumn( 
mainAxisAlignment: MainAxisAligr .center, 
children: «Widget»| 
w( 
mainAxisAlignment: MainAxisA nment.center, 
children: «Widget 


» 


height: 30, 

width: 150, 

margin: EdgeInse .a11(5), 

padding: £ r s.all(5), 

decoratio B ecoration(color: Colors.purple(106J, border: Bord 
color: Co .purple, 
width: 2 

2a 


p cu. 


$ flutter run 
Your application code is in .\lib\main.dart. 


exit code @ 


03:40 17:27 


IN ella E SS “ 
Lalu untuk child nya kita punya text dia rata kanan dan di tengah 

Bebrati pasang align alignment centerright 

Child 
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child: Alig 
alignment: Alignment.centerRigi 
child: 


style: Text let 
color: ) .purple, fontWeight: FontWeight.w70@) 
» 
», 
height: 
width: 


margin: EdgeInsets.all(5), 
padding: EdgeInsets.al1l(5), 
decoration: xDe ation( 
color: Colors.purplef(160), 
border: Border.all(color: ors.purple, width: 2)), 


In Fher 
p cü. 


$ flutter run 
Your application code is in .\lib\main.dart. 


exit code @ 


04:29 17:27 


TEOT Hmn HAE -cua 
Untuk kotak yg bawah container kita copy semua lalu paste dibawah nya row 
Bebrati didalamn child column 
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height: 
width: 
margin: nsets.all(5), 
padding: ts.all(5), 
decoration: XL 3tion( 
color: ors.purplef18 
border: r .all(color: lors.purple, width: 2)), 


DU. 
$ flutter run 


Your application code is in .Nlib'main.dart. 


exit code @ 


04:43 17:27 


I mw wu Fs Me” | 
Disini widht nya dihlinagkan 

Warna juga hilangkan 

Pingir nya warna black 
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yiner( 

child: Align( 
alignment: / 2nment.centerRight, 
child: T 


style: TextStyle( 
color: Col .purple, fontWeight: 
» 

», 
height: 
margin: ets.all(5), 
padding: EdgeInsets.all(5), 
decoration: BoxDe tion( 

border: .all(color: C rs.black, width: 2)), 


Du. 
$ flutter run 


Your application code is in .Nlib'main.dart. 


exit code @ 


05:13 17:27 


IN im Tm Fs MP | 
Punya 2 buah text 

1 menunjukan berapa buah apel kita beli dan satu lagi bearap jumlah yg kita bayar 
Berati text ini kita bungkus dgn row 

Terus kita copy buat 2 


Disni tulisan nya apple 

Dibawahnya total nya 

Warna ganti black 

W500 tebal font 

Row main axisalign ubah menjadi space betwen 
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iner( 
child: Align( 
alignment: Al nt.centerRight, 
child: Row( 
mainAxisAlignment : xisAlignment.spaceBetweenl, 
children: 


s.black, fontwei 


( 
.black, fontWeight: W ht.w500), 


du. 
$ flutter run 


Your application code is in .Nlib'main.dart. 


exit code @ 


06:18 


I ep a Fs 0 i 
Lalu kita lihat hasilnya 
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iner( 
child: A Int 
alignment: Ali ent.centerRight, 
child: Row( 
mainAxisAlignment: M 
children: «Widget» 
Text( 


style: 
color: C rs.black, fontWeight 


Balance 


Apple (500) x 20 10000 


( 
.black, fontWeight 


Launching lib'main.dart on RNE L22 in debug mode... 


Built build\app\outputs\apk\debug\app-debug. apk. 


06:28 17:27 


Maka sudah jadi sepertini 
Pingiran nya belum dikasih melengkung maka kasih radius 


Boxdecoration yg bawah juga sama 
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Audio 


Lau 


10000", 
style: 
color: 
» 
)s 
height 


margin: 
padding: 
decoration: 


borderRadius: 


color: 
border: 


», 


child: ( 


( 


.purple, fontWeight: 


.circular(5), 


.purple(100), 
.all(color: 


n.dart on RNE L22 in debug mo 


Built buildNappNoutputsNapkNdebugNapp-debug. apk. 


06:48 
IN) Ka ES SISI 


.purple, width: 2)) 


Maka sudah ada melengkung 
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Launching lib\ 


Built buildNapp 


"10000", 
style: 
color: 


», 

height: 30, 

margin: 

padding: 

decoration: 
borderRadius: 
border: 


ain.dart on RNE L22 in debug 


putsNapkNdebugi 


Reloaded 1 of 462 libraries in 751ms. 


07:06 
HN Ke DR SISI 


.all (color: 


( 
.black, fontWeig 


sal1(5); 


.all(5), 
( 

.circular(5), 
„black, 


Balance 


Apple (500) x 20 10000 


Sekarang tambhakan floating button itu ada discafold 
Onparsed kita kosongi dahulu child nya kasih icon kasih warna juga 
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build( context) { 


home: ( 
floatingActionButton: 
onPressed: () {}, 
child: ( .add_shopping_cart), 
backgroundColor: .purple, 
», 
appBar: ( 
backgroundColor: .purple, 
title: ("Multi Provider"), 
» 
body: 
child 


Launching lib'main. 

Built buildNapplout 

Reloaded 1 of 462 libraries in 75 
reloaded 1 of 462 

Reloaded 1 of 462 


Maka kita lihat sudah ada 
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build( context) ( 
return 
home: 4 

floatingActionButton: 
onPressed: () (), 
child: ( .add shopping cart), 
backgroundColor: .purple, 

» 

appBar: ( Balance 


backgroundColor: .purple, Apple (500) x 20 10000 


title: ("Multi Provider"), 


» 


body: 
child: 


Launching libmain.dart on RNE L22 in debug mode 
Built build\app\outputs\apk\debug\app-debug. apk. 
Reloaded 1 of 462 libraries in 751ms. 
Reloaded 1 of 462 libraries in 860ms. 


Reloaded 1 of 462 libraries in 669ms. 


H Ana AU SER -Sia 
Bentuk nya sudah jadi sekarang buat shared state nya 

Kita buat file chart kasih class 

Cart lalu with changenotifier 

Import foundation.dart 

Lalu buat int _quality pertamakali 0 

Lalu buat get nnya kemblikan quanty 

Lalu buat set nya 


Dn kasih notifierlistiner 
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mit o 


package:flutter/founda 


quantity = ð; 


quantity => _quantity; 
quantity( value) 


_quantity = value; 
notifyListeners(); 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug. apk. 
Reloaded 1 of 4 ibraries in 751ms. 

Reloaded 1 of 4 ibraries in 8€ 


Reloaded 1 of 462 libraries in 669ms. 


ka 


1 Ga Da Pei “La 
Lalu buat lagi copy semua buat file money.dart 
Lalu ganti namanya class dan int belance 
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moneydat © 


package:flutter/foundation.dart' : 


balance 


balance - balance, 
guantity ( value) { 
“balance = value, 
notifyListeners(), 


Launching liblmain.dart on RNE L22 in debug mode 
Built buildNappNoutputsNapkNdebugNapp-debug. apk. 
Reloaded 1 of 462 libraries in 751ms. 
Reloaded 1 of 4 in 860ms. 
Reloaded 1 of 4 a in 669ms. 

233ms. 


ko 


O Type nere tose 


09:42 


DE im) Claw SS MĂ” 
Lalu ke puspec yami nya 
Disni pakai providers 
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a orm onom ~ 


[multi_provider] flutter packages get 


Running "flutter pub get" in multi provider... 
exit code 9 


1N) Ka Lil SISI ME | 
Udh pindah ke main dart 

Lalu import 

Sekarang buat chngenatiefrProfider 

Kita da banyk maka tidak bisa bungkus sebelumnya 

Jadi dibungkus dgn multiProvider 

Disini route paling dekat scafold karena floating button juga butuh 

Scafold bungkus dgn widget namanya multiProviders 

Didalamnya ada provider itu list disni 

Disni baru kasih changeNotifierProvider 

Builder context lalu => return nya Money(),), 

Kedua yg changeNotiferProvider xtpenya card- builder context treturn nya card 
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main() => runApp( ()); 


build( context) { 
return 
home: 
providers: [ 
>(builder: (context) => 
>(builder: (context) => 
L 
child: ( 
floatingActionButton: 
onPressed: () {}, 
child: ( .add shopping cart), 
backgroundColor: .purple, 


», 


Imulti provider) flutter packages get 
Running "flutter pub get" in multi provider... 
exit code @ 


11:47 
Ih Ke Cal SSM 0 i 
46.FLUTTER 43. Provider State Management (Multi Provider).mp4 - VLC media player pes x 
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main() => runApp( WM), 


build( context) ( 
return 
home: 
providers: | 
« 
builder: (context) => 
) 
< 
builder: (context) => 
) 
1, 
child: ( 
floatingActionButton: 


Imulti provider) flutter packages get 


Running "flutter pub get" in multi provider... 
exit code 9 


Ti FBR Lilit SISI « 8. 
Terus tugas kita pasang consumer nya itu 

Pasang dibalance 100 ganti sesuai dgn money kita 

Cousemerdctipe money>( ada builder: (conext ,lalu class ,money nya ketiga 
kosongkan , ) returnb nya => 

Text(money.balance.toString, style 
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x 
mainAxisAlignment: 
children: < >[ 
("Balance 
( 
child: ( 
alignment: .centerRight, 
child: « >( 
builder: (context, money, _) => 
money.balance.toStringl )!, 
styl ( 
or: .purple, 
fontWeight: .W700), 


» 
height 
width: 1 


Imulti provider) flutter packages get 
Running "flutter pub get" in multi provider... 
exit code @ 


i daa Gu FC « i 
Lalu ke bawah lagi 

Text ini kita ubah jadi sesuai guanty nya 

Kedua buah text ini membutuhkan guanty yg dibeli 

Maka consumer dipasang row saja 

Coumserctipenya card- builder (context, card, ) => row 

Text isi nya hapus ambil dari card 
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builder: (context, cart, _) => 
mainAxisAlignment: .spaceBetween, 
children: « »I 
( 
"Apple (5090) x " + cart.guantity.toString(), 
style: ( 
color: “black, 
fontwWeight: .w500), 


( 
(5 y .guantity).toString( Jl, 
style: ( 
color: .black, 
fontWeight: .W588), 


Imulti provider) flutter packages get 
Running "flutter pub get" in multi provider... 
exit code @ 


Maka kita lihat disini balance nya 0 total juga 0 maka sambung 
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lder: (context, cart, _) 
mainAxisAlignment: 
children: € >L 
( 
"Apple (500) x + cart.guantit 
style: ( 
color: “black, 
fontWeight: 
» 
( 
(500 “ cart.guantity).toString( 
style: ( J 
color: “black, Apple (500) x 0 d 
fontWeight: 


Imulti provider) flutter packages get 
Running "flutter pub get" in multi provider... 
exit code @ 


14:17 

Ih rem ja Cal SSM 0 —. 
Disni kita tambhakn money 10 ribu 

46.FLUTTER 43. Provider State Management (Multi Provider).mp4 - VLC media player - x 


Media Playback Terjemahan Peralatan Tampilan Bantuan 


Audio Video 


package:flutter/foundation.dart'; 


_balance = 10000; 


balance _balance; 
balance( value) { 
_balance = value; 
notifyListeners(); 


[multi_provider] flutter packages get 


Running "flutter pub get" in multi_provider... 
exit code 9 


1) papa cat Sisi "ci 
Dikembali ke main flotingButton dibungkus dia butuh setsate 

Di butuh cart dan money 

Bungkus maua apa dulu disni bungkus cart dahulu 

Lalu consumer bunkus lagi dgn consumer lagi bertipe <money> 
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< 
builder: (context) => 


L 
child: ( 
floatingActionButton: 
builder: (context, money, _) => 
builder: (context, cart, _) => 
onPressed: () {}, 
child: ( .add_shopping_cart), 
backgroundcolor : .purple, 
) 
» 
», 
appBar: ( 
backgroundColor: .purple, 
title: (“Multi Provider"), 
y 


(multi provider) flutter packages get 
Running "flutter pub get" in multi provider... 
exit code @ 


1) a cw (sisix « i 
Disni ketika ditekan 

Card.guanty di tambah + 1 

Dan money - kurang -= 500 

Ini dikurangi kalau uang nya belum habis 

Maka kita buat if yaitu money lebihg besar 500 
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< 
builder: (context) => 
) 
l 
child: ( 
floatingActionButton: 
builder: (context, money, _ 
builder: (context, cart, _ 
onPressed: () ( 
if (money.balance »- 
cart.guantity + 
money.balance - 
) 
} 


child: ( .add_shopping_cart), 
backgroundColor: .purple, 
», 


Imulti provider) flutter packages get 
Running "flutter pub get" in multi provider... 
exit code 9 


i Ku pu ADE « 
Kalau uang besar maka bisa beli maka kurang tidak bisa 
Lalu restart 
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Multi Provider 


child: ( 
floatingActionButton: 
builder: (context, money, 
builder: (context, cart, 
onPressed: () | 
(money.balance 
cart.guantity + 


money.balance -= 586 Balance (9500) 


Apple (500) x 1 


.add_shopping_cart), 
backgroundColor: .purple, 


Imulti provider) flutter packages get 


Running "flutter pub get" in multi provider... 
exit code @ 


16:54 
Ih Ke Cal SSM 


Maka sudah 


